/**
 * 产业排名
 */
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import WrapTitle from '@common/wrapTitle';
import AnimationBar from '@common/animationBar';
import { ToThousandsTOOL } from '@/utils';
import './style.scss';

export default defineComponent({
  name: 'IndustryRank',
  props: {
    data: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  render(props) {
    const router = useRouter();
    // 取总数，用于计算百分比
    const sum = props.data?.reduce?.((total: number, c: any) => {
      if (c.value === '-') {
        return total;
      }
      return total + (c.value || 0);
    }, 0);

    return (
      <div id="IndustryRank">
        <WrapTitle title="产业排名"></WrapTitle>

        <ul>
          {props.data?.map?.((info: any) => {
            const percent = ((info.value / sum) * 100).toFixed(2);

            return (
              <li
                onClick={() => {
                  sessionStorage.setItem('IndustryName', info.name);

                  router.push('/industryView');
                }}
              >
                <section>
                  <aside>{info.name}</aside>
                  <aside>
                    {info.value ? ToThousandsTOOL(info.value) : '-'}
                    <span> 家</span>
                  </aside>
                </section>

                <AnimationBar
                  color={{
                    bar: info.color,
                    circle: info.circleColor,
                    circleBorder: info.circleBorderColor,
                  }}
                  value={Number(percent) || 0}
                  option={{
                    margin: '-14px',
                    percentText: {
                      color: '#fff',
                      fontSize: '16px',
                    },
                  }}
                />
              </li>
            );
          })}
        </ul>
      </div>
    );
  },
});
